<template>
	<div class="page">
		<global-header title="发红包" @back="$router.back()" />
		<main class="page-main">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="state.gameText" required is-link readonly label="选择游戏" placeholder="" input-align="right"
						@click="masterClick" />
					<van-field v-model="state.TypeText" label="红包类型" placeholder="请选择红包类型" is-link readonly input-align="right"
						@click="typeShow = true" />
					<van-field :model-value="selectAll ? '全部会员' : state.userText" label="会员列表" placeholder="请选择会员" is-link
						readonly input-align="right" @click="memberShow = true" />
					<van-field v-model="form.Amount" label="红包积分" placeholder="请输入红包积分" input-align="right" required />
					<van-field v-model="form.Count" label="红包数量" placeholder="请输入红包数量" input-align="right" required />
					<van-field v-model="form.MiniBet" label="最小流水" placeholder="请输入最小流水" input-align="right" required />
					<!-- <van-field v-model="state.Amount" label="是否扣除红包流水限制" :label-width="150" is-link readonly
            input-align="right" @click="flowLimitShow = true" /> -->
					<van-field v-model="form.Remark" label="红包备注" placeholder="恭喜发财！大吉大利！" input-align="right" />
					<van-field v-model="form.EndTime" required is-link readonly label="到期时间" placeholder="" input-align="right"
						@click="endTimeClick" />
				</van-cell-group>
				<div style="margin: 16px">
					<van-button round block native-type="submit" :disabled="state.updating" class="submit-btn"
						:loading="state.updating">
						提交
					</van-button>
				</div>
			</van-form>
		</main>
	</div>
	<DateTime ref="dateTimeRef" @confirm="dateConfirm" />
	<GamePopup ref="gamePopupRef" @update="gameConfirm" />
	<!-- <SearchInput ref="searchInputRef" @confirm="searchConfirm" /> -->
	<van-popup v-model:show="typeShow" destroy-on-close round position="bottom">
		<van-picker :v-model="state.TypeText" :columns="TypeList" @cancel="typeShow = false" @confirm="onConfirm" />
	</van-popup>
	<van-popup v-model:show="memberShow" destroy-on-close round position="bottom"
		:style="{ height: '80%', overflow: 'hidden' }" :close-on-click-overlay="true">
		<div class="page" style="background-color: white;">
			<van-search v-model="searchVal" shape="round" @search="onSearch" show-action placeholder="请输入会员名称进行搜索">
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>
			<main class="page-main" style="background-color: white;">
				<template v-if="memberTypeList.length > 0">
					<ul class="red-pack-search-list">
						<li v-for="(item, index) in memberTypeList" :key="index" @click.stop="onConfirmMember(item)"
							v-html="item.Name">
						</li>
					</ul>
				</template>
				<van-empty v-else description="暂无会员信息" style="height: 400px" />
			</main>
			<div style="padding: 10px;">
				<van-button :disabled="state.loading" @click="() => {
					selectAll = true;
					memberShow = false;
				}" style="background: #E34F48;color: white;" block>选择全部</van-button>

			</div>
		</div>
	</van-popup>
</template>
<route>
  {
    name: "admin-main-send-red",
    meta: {
      pageIndex: 4,
    }
  }
</route>
<script setup lang="ts">
// src/pages/admin/report/unsettled.vue
import GamePopup from "@/pages/admin/main/components/game-popup-multiple.vue";
import DateTime from "@/pages/admin/main/components/date-time.vue";
import { reqUserQuery, reqSendRedPacket } from "@/api/user";
import { debounce } from "lodash-es";
import { showSuccessToast } from "vant";
import { useRouter } from "vue-router";

const selectAll = ref(false)

const router = useRouter();
interface FormState {
	GameList: number[];
	Type: number;
	Amount: any;
	Count: any;
	MiniBet: any;
	Remark: string;
	EndTime: any;
}
const typeShow = ref(false); //红包类型弹窗
const memberShow = ref(false); //会员类型弹窗
const gamePopupRef = ref();
const dateTimeRef = ref();
const TypeList = [
	{ text: "等额", value: "2" },
	{ text: "随机", value: "1" }
];
const memberTypeList = ref<any[]>([]); // 会员列表
const searchVal = ref<string>("");

const defaultForm = {
	GameList: [],
	Type: 2,
	Amount: null,
	Count: null,
	MiniBet: 0,
	Remark: "恭喜发财！大吉大利！",
	EndTime: ""
};
const emit = defineEmits(["update"]);
const state = reactive<any>({
	updating: false,
	isShow: false,
	maste: false,
	games: <GameLeftMo[]>[],
	gameText: "",
	user: "",
	userText: "",
	loading: false,
	options: <{ UserId: number; Name: string }[]>[],
	isDeducted: false,
	TypeText: "等额"
});
const form = reactive<FormState>({ ...defaultForm });

const masterClick = () => {
	if (gamePopupRef.value) {
		nextTick(() => {
			gamePopupRef.value?.open();
		});
	}
};
const gameConfirm = (value: any) => {
	state.gameText = value.map((item: any) => item.text).join(",");
	state.games = value;
};
const endTimeClick = () => {
	dateTimeRef.value?.open();
};
const dateConfirm = (value: any) => {
	form.EndTime = value;
};
const onSubmit = debounce(
	async () => {
		const list = state.games.map((item: any) => `{${item.value}}`).join("");
		if (!state.gameText) {
			return showToast("请选择游戏");
		}
		if (!state.user&&!selectAll.value) {
			return showToast("请选择会员");
		}
		if (!form.Amount) {
			return showToast("请输入红包积分");
		}
		if (!form.Count) {
			return showToast("请输入红包数量");
		}
		if (!form.MiniBet && form.MiniBet !== 0) {
			return showToast("请输入最小流水");
		}
		if (!form.EndTime) {
			return showToast("请选择到期时间");
		}
		const data = {
			GameList: list,
			Type: form.Type,

			Amount: Number(form.Amount),
			Count: Number(form.Count),
			MiniBet: Number(form.MiniBet),
			Remark: form.Remark,
			EndTime: form.EndTime,
			...(selectAll.value ? {} : {
				UserId: selectAll.value ? '' : Number(state.user)
			})
		};
		try {
			state.updating = true;
			await reqSendRedPacket(data);
			state.updating = false;
			state.user = "";
			state.options = [];
			showSuccessToast("发送成功");
			setTimeout(() => {
				router.back();
			}, 200);
		} catch (error) {
			state.updating = false;
			console.log(error);
		}
	},
	500,
	{ leading: true, trailing: false }
);
const onConfirm = (value: any) => {
	form.Type = value.selectedOptions[0].value;
	state.TypeText = value.selectedOptions[0].text;
	typeShow.value = false;
};

const onConfirmMember = (item: any) => {
	selectAll.value = false;
	state.user = item.UserId;
	state.userText = item.Name
	memberShow.value = false;
	searchVal.value = "";
};
const onSearch = debounce(async () => {
	try {
		memberTypeList.value = [];
		const response = await reqUserQuery({ Name: searchVal.value });
		memberTypeList.value = response.data;

	} catch (err) {
		console.log(err)
	}
}, 500);
onMounted(() => {
	onSearch()
})
</script>
<style scoped lang="scss">
.page {
	background: #e34f48;

	.header {
		background: #e34f48;

		:deep() {
			div {
				color: #fff;
			}

			.header-left {
				.van-icon {
					color: #fff !important;
				}
			}
		}
	}

	.header .header-left .van-icon {
		color: #fff !important;
	}

	.page-main {
		width: 375px;
		height: 100%;
		background: #f4f4f4;
		border-radius: 15px 15px 0px 0px;

		.van-cell-group--inset {
			margin: 0 !important;
		}

		.form-submit {
			width: 345px;
			z-index: 999;

			.van-button {
				width: 345px;
				background: #E34F48 !important;
				color: #fff;
				position: fixed;
				bottom: 50px;
				margin: 0 auto;
			}
		}
	}
}
</style>

<style lang="scss">
.red-pack-search-list {
	list-style: none;
	padding: 0;
	min-height: 400px;
	height: calc(100% - 80px);
	@apply py-[5px];
	overflow-y: auto;

	li {
		@apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];

		&:hover {
			background-color: #f5f5f5;
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 50px;
	left: 0;
	right: 0;
	width: 345px;
	height: 44px;
	background: #E34F48;
	border-radius: 5px;
	margin: 0 auto;
	font-weight: 500;
	font-size: 15px;
	color: #FFFFFF;
	line-height: 12px;
	text-align: center;
	font-style: normal;
	text-transform: none;

}
</style>
